<template>
  <a-modal
    v-model:visible="showModal"
    :mask-closable="false"
    title="修改关联订单"
    @cancel="onClose"
    @before-ok="onConfirm"
    width="45vw"
    unmount-on-close
  >
    <page-form :model="form" div="true" class="page-form" ref="formRef" layout="vertical">
      <page-form-row>
        <page-form-item size="1/3" field="refType" label="业务类型">
          <a-select placeholder="请选择" v-model="form.refType" @change="changeRefType" :allow-clear="true">
            <a-option v-for="item in dict.refTypeEnums" :key="item.value" :value="item.value" :label="item.label" />
          </a-select>
        </page-form-item>
        <page-form-item
          size="1/3"
          field="refId"
          label="自有订单号"
          :rules="{ required: form.refType ? true : false, message: '请选择自有订单号' }"
        >
          <remote-select
            v-if="form.id && form.refType"
            v-model="form.refId"
            placeholder="请选择"
            :params="{ id: form.id, refType: form.refType }"
            type="relate_ref_code"
            @change="changeRefOrderFn"
          />
          <a-input v-else placeholder="请选择" disabled />
        </page-form-item>
        <page-form-item size="1/3" label="渠道订单号">
          <span>{{ form.refId && form.channelOrderCode ? `${form.channelTypeName}${form.channelOrderCode}` : '-' }}</span>
        </page-form-item>
      </page-form-row>
      <page-form-row>
        <page-form-item size="1/3" label="租赁周期">
          <span v-if="form.refId">{{ `${form.actualStartTime || '-'} 至 ${form.actualEndTime || '-'}` }}</span>
          <span v-else>-</span>
        </page-form-item>
        <page-form-item size="1/3" label="承租人信息">
          {{ form.refId ? `${form.memberName || '-'}${form.memberPhone || '-'}` : '-' }}
        </page-form-item>
      </page-form-row>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" :loading="okLoading" @click="onConfirm">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { editOrderApi, getRefCodeApi } from '@/api/order/etcOrder'
  import { usePageDict } from '@/hooks/useDict'
  const dict = usePageDict('getEtcOrderEnums')

  const form = ref({})

  const showModal = ref(false)
  const okLoading = ref(false)
  const open = (val) => {
    form.value.id = val.id
    form.value.refType = val.refType
    form.value.refId = val.refId
    console.log(val, '测试121212')
    if (val.refId && form.value.refType) {
      getRefInfo(val)
    }
    showModal.value = true
  }
  // 获取关联订单信息
  const getRefInfo = (val) => {
    getRefCodeApi({ id: val.id, refType: val.refType, refId: val.refId }).then((res) => {
      if (res.code === 200) {
        let result = res.result
        let info = result?.find((item) => item.refCode == val.refCode)
        changeRefOrderFn(info?.refId, info)
      }
    })
  }
  const onClose = () => {
    showModal.value = false
    form.value = {}
  }
  // 更改业务类型
  const changeRefType = () => {
    form.value.refId = ''
  }
  // 更改自有订单号
  const changeRefOrderFn = (val, option) => {
    form.value.refId = option ? option.id : ''
    form.value.channelTypeName = option ? option.channelTypeName : ''
    form.value.channelOrderCode = option ? option.channelOrderCode : ''
    form.value.actualStartTime = option ? option.actualStartTime : ''
    form.value.actualEndTime = option ? option.actualEndTime : ''
    form.value.memberName = option ? option.memberName : ''
    form.value.memberPhone = option ? option.memberPhone : ''
  }
  const formRef = ref()
  const validateFn = () => {
    okLoading.value = true
    return new Promise((resolve, reject) => {
      formRef.value.validate((error) => {
        if (error) {
          console.log(error)
          okLoading.value = false
          reject()
        } else {
          resolve()
        }
      })
    })
  }
  const emits = defineEmits(['editOk'])
  const onConfirm = (done) => {
    return new Promise((resolve, reject) => {
      validateFn()
        .then(() => {
          let params = {
            id: form.value.id,
            refType: form.value.refType,
            refId: form.value.refId,
          }
          editOrderApi(params)
            .then((res) => {
              okLoading.value = false
              Message.success(res.message)
              emits('editOk', res.result)
              onClose()
              done()
              resolve()
            })
            .catch((err) => {
              console.log(err)
              okLoading.value = false
              reject()
            })
        })
        .catch(() => {
          reject()
        })
    })
  }

  defineExpose({
    open,
  })

  onMounted(() => {})
</script>

<style lang="less" scoped>
  .page-form {
    margin: 0;
    height: 300px;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
</style>
